<template>
  <div class="water-info-box">
    <div class="water-info-top">
      <div class="left-img-info">
        <div class="title">防洪基础指标</div>

        <div class="img-left-box">
          <CrossSection :crossSectionData="state.crossSectionData" />

          <!-- <img src="@/assets/images/dispatch/water_img.png" /> -->
        </div>
        <div class="title">水位流量关系线</div>

        <div class="img-left-box1">
          <div class="img-left-select">
            曲线名称：
            <el-select
              v-model="state.lineName"
              placeholder="选择曲线"
              @change="handleSelectZqrl"
              size="small"
            >
              <el-option
                v-for="item in state.StationZqrlSelect"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="img-left-echarts">
            <dispachLevelFlow
              :x-labels="state.echartsData.x"
              :y-values="state.echartsData.y"
              :waterGuarantee="state.bzZ"
              :waterWaring="state.wrZ"
            />
          </div>
          <!-- <img src="@/assets/images/dispatch/water_img.png" /> -->
        </div>
      </div>
      <div class="tabs-right-box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :stretch="true">
          <el-tab-pane label="基础信息" name="first">
            <div class="basic-index-box">
              <div class="content-info">
                <div class="info-left">
                  <div class="key-value">
                    <div class="key">名称：</div>
                    <div class="value">{{ state.StationBaseInfo?.stnm || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">报汛等级：</div>
                    <div class="value">{{ state.StationBaseInfo?.frgrd || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">所在水系：</div>
                    <div class="value">{{ state.StationBaseInfo?.hnnm || '--' }}</div>
                  </div>
                  <!-- <div class="key-value">
                    <div class="key">经纬度：</div>
                    <div class="value">117.090006°, 35.945062°</div>
                  </div> -->
                  <div class="key-value">
                    <div class="key">详细地址：</div>
                    <div class="value">{{ state.StationBaseInfo?.stlc || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">信息管理单位：</div>
                    <div class="value">{{ state.StationBaseInfo?.admauth || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">基面高程：</div>
                    <div class="value">{{ state.StationBaseInfo?.dtmel || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">测站方位：</div>
                    <div class="value">{{ state.StationBaseInfo?.stazt || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">拼音码：</div>
                    <div class="value">{{ state.StationBaseInfo?.phcd || '--' }}</div>
                  </div>
                </div>
                <div class="info-center">
                  <div class="key-value">
                    <div class="key">测站编码：</div>
                    <div class="value">{{ state.StationBaseInfo?.stcd || '--' }}</div>
                  </div>
                  <!-- <div class="key-value">
                    <div class="key">中央报汛站：</div>
                    <div class="value">{{ state.StationBaseInfo.phcd }}</div>
                  </div> -->
                  <div class="key-value">
                    <div class="key">建站时间：</div>
                    <div class="value">{{ state.StationBaseInfo?.esstym || '--' }}</div>
                  </div>
                  <!-- <div class="key-value">
                    <div class="key">所属政区：</div>
                    <div class="value">{{ state.StationBaseInfo.addvcd }}</div>
                  </div> -->
                  <div class="key-value">
                    <div class="key">交换管理单位：</div>
                    <div class="value">{{ state.StationBaseInfo?.locality || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">基面修正值：</div>
                    <div class="value">{{ state.StationBaseInfo?.dtpr || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">至河口距离：</div>
                    <div class="value">{{ state.StationBaseInfo?.dstrvm || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">启用标志：</div>
                    <div class="value">{{ state.StationBaseInfo?.usfl || '--' }}</div>
                  </div>
                </div>
                <div class="info-right">
                  <div class="key-value">
                    <div class="key">站点类型：</div>
                    <div class="value">{{ state.StationBaseInfo?.sttp || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">所在河流：</div>
                    <div class="value">{{ state.StationBaseInfo?.rvnm || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">始报时间：</div>
                    <div class="value">{{ state.StationBaseInfo?.bgfrym || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">行政区划代码：</div>
                    <div class="value">{{ state.StationBaseInfo?.addvcd || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">隶属行业单位：</div>
                    <div class="value">{{ state.StationBaseInfo?.atcunit || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">基面名称：</div>
                    <div class="value">{{ state.StationBaseInfo?.dtmnm || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">测站岸别：</div>
                    <div class="value">{{ state.StationBaseInfo?.stbk || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">集水面积：</div>
                    <div class="value">{{ state.StationBaseInfo?.drna || '--' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="河道防洪指标" name="second">
            <div class="design-index-box">
              <div class="info-box">
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">左堤高程：</div>
                    <div class="value">{{ state.StationFControlInd?.leftdem || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">警戒流量：</div>
                    <div class="value">{{ state.StationFControlInd?.warnQ || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">实测最高水位：</div>
                    <div class="value">{{ state.StationFControlInd?.obhtz || '--' }}</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">右堤高程：</div>
                    <div class="value">{{ state.StationFControlInd?.rightdem || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">保证水位：</div>
                    <div class="value">{{ state.StationFControlInd?.bzZ || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">实测最高水位出现时间：</div>
                    <div class="value">{{ state.StationFControlInd?.obhtztm || '--' }}</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">警戒水位：</div>
                    <div class="value">{{ state.StationFControlInd?.warnZ || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">保证流量：</div>
                    <div class="value">{{ state.StationFControlInd?.bzQ || '--' }}</div>
                  </div>
                  <div class="key-value">
                    <div class="key">调查最高水位：</div>
                    <div class="value">{{ state.StationFControlInd?.ivhz || '--' }}</div>
                  </div>
                </div>
              </div>
              <div class="info-box-item">
                <div class="key-value">
                  <div class="key">调查最高水位出现时间：</div>
                  <div class="value">{{ state.StationFControlInd?.ivhztm || '--' }}</div>
                </div>
              </div>
              <div class="info-box">
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">实测最大流量：</div>
                    <div class="value">{{ state.StationFControlInd?.obmxq || '--' }}</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">实测最大流量出现时间：</div>
                    <div class="value">{{ state.StationFControlInd?.obmxqtm || '--' }}</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">调查最大流量：</div>
                    <div class="value">{{ state.StationFControlInd?.ivmxq || '--' }}</div>
                  </div>
                </div>
              </div>
              <div class="info-box-item">
                <div class="key-value">
                  <div class="key">调查最大流量出现时间：</div>
                  <div class="value">{{ state.StationFControlInd?.ivmxqtm || '--' }}</div>
                </div>
              </div>
              <!-- <div class="info-box">
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">历史最大含沙量：</div>
                    <div class="value">--kg/m³</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最大断面平均流速：</div>
                    <div class="value">--m/s</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最低水位：</div>
                    <div class="value">--m</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最小流量：</div>
                    <div class="value">--m³/s</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">历史最大含沙量出现时间：</div>
                    <div class="value">--</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最大断面平均流速出现时间：</div>
                    <div class="value">--发客户反馈和覅顶顶顶烦烦烦是我我</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最低水位出现时间：</div>
                    <div class="value">--</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最小流量出现时间：</div>
                    <div class="value">1955-06-23 00:00</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value"></div>
                  <div class="key-value"></div>
                  <div class="key-value"></div>
                  <div class="key-value"></div>
                </div>
              </div> -->
              <!-- <div class="info-box">
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">历史最大含沙量：</div>
                    <div class="value">--kg/m³</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最大断面平均流速：</div>
                    <div class="value">--m/s</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最低水位：</div>
                    <div class="value">--m</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最小流量：</div>
                    <div class="value">--m³/s</div>
                  </div>
                  <div class="key-value">
                    <div class="key">高水位预警值：</div>
                    <div class="value">--m</div>
                  </div>
                  <div class="key-value">
                    <div class="key">小流量预警值：</div>
                    <div class="value">--m³/s</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value">
                    <div class="key">历史最大含沙量出现时间：</div>
                    <div class="value">--</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最大断面平均流速出现时间：</div>
                    <div class="value">--</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最低水位出现时间：</div>
                    <div class="value">--</div>
                  </div>
                  <div class="key-value">
                    <div class="key">历史最小流量出现时间：</div>
                    <div class="value">
                      1955-06-23 00

                     <el-tooltip
                        content="1955-06-23 00:00"
                        placement="top"
                        :disabled="["1955-06-23 00:00"].length < 8"
                      >
                        <span>{{ item.value }}</span>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="key-value">
                    <div class="key">大流量预警值：</div>
                    <div class="value">-m³/s</div>
                  </div>
                  <div class="key-value">
                    <div class="key">启动预报水位标准：</div>
                    <div class="value">--m</div>
                  </div>
                </div>
                <div class="content-box">
                  <div class="key-value"></div>
                  <div class="key-value"></div>
                  <div class="key-value"></div>
                  <div class="key-value"></div>
                  <div class="key-value">
                    <div class="key">低水位预警值：</div>
                    <div class="value">--m</div>
                  </div>
                  <div class="key-value">
                    <div class="key">启动预报流量标准：</div>
                    <div class="value">--m³/s</div>
                  </div>
                </div>
              </div> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- <div class="water-info-bottom">
      <div class="title">水位库容曲线/水位面积线/水位泄量关系</div>
      <div class="bottom-box">
        <div class="bottom-item">
          <StorageCurve :storageCurveData="storageCurveData" />
        </div>
        <div class="bottom-item">
          <WaterSurfaceArea :waterSurfaceAreaData="storageCurveData" />
        </div>
        <div class="bottom-item">
          <StageDischargeRelationV3
            :stageDischargeData="stageDischargeRelationDataV3"
            :selectWidth="selectWidth"
          />
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import axios from 'axios'
import dispachLevelFlow from '@/components/app-echart/dispach-level-flow.vue'
import emitter from '@/utils/bus'
import {
  // 查询河道基础信息
  getStationBaseInfo,
  // 查询河道防洪指标
  getStationFControlInd,
  // 查询河道水位流量关系线
  getStationZqrl
} from '@/services/modules/dispatch-manage'
const activeName = ref('first')
const state = reactive({
  dispachInfo: [],
  // 基础信息
  StationBaseInfo: {},
  // 防洪指标
  StationFControlInd: {},
  // 河道刨面
  crossSectionData: {},
  // 河道水位流量
  StationZqrl: [],
  // 传入echa水位流量关系数据
  echartsData: {
    y: [],
    x: []
  },
  wrZ: '',
  bzZ: '',
  // 曲线名称集合
  StationZqrlSelect: []
})
const props = defineProps({
  // blkcd
  blkcdWater: {
    type: Number,
    default: ''
  },
  stcd: {
    type: Number,
    default: ''
  }
})
watch(
  () => {
    props.blkcdWater
  },
  () => {
    handleGetStationInfo(props.blkcdWater)
    getWaterLevel()
  },
  {
    immediate: true,
    deep: true
  }
)

onMounted(() => {
  // getWaterLevel()
  emitter.emit('initEcharts')
})

// 获取刨面信息
function getWaterLevel() {
  return new Promise((resolve, reject) => {
    axios(`${checkedSection}?stcd=${props.stcd}`).then((res) => {
      console.log(res.data.data, 8888)
      let data = res.data.data
      state.crossSectionData = {
        z: Number(data.nowWaterLevel[0]), //水位
        q: Number(data.q.q), //流量
        zWarn: Number(data.warningWaterLevel[0]), //警戒水位
        zGuarantee: Number(data.guaranteedWaterLevel[0]), //保证水位
        qWarn: Number(data.q.wrq) || 0, //警戒流量
        qGuarantee: Number(data.q.grq) || 0, //保证流量
        section: []
        // section: [
        //   { elevation: 175.882, startingDistance: 0.0, remark: '起点' },
        //   { elevation: 175.892, startingDistance: 4.078, remark: null },
        //   { elevation: 175.706, startingDistance: 8.371, remark: null },
        //   { elevation: 175.501, startingDistance: 18.191, remark: null },
        //   { elevation: 175.537, startingDistance: 21.052, remark: null }
        // ]
      }
      // 高程遍历
      data.riverBottomElevation.forEach((e, index) => {
        state.crossSectionData.section.push({ elevation: Number(e) })
      })
      console.log(state.crossSectionData.section, '打印11')

      // 距起点的距离遍历
      data.distance.forEach((e, index) => {
        if (index == 0) {
          state.crossSectionData.section[0].remark = '起点'
        } else {
          state.crossSectionData.section[index].remark = null
        }
        state.crossSectionData.section[index].startingDistance = Number(e)
      })
      state.crossSectionData.section[data.distance.length - 1].remark = '终点'
      console.log(state.crossSectionData.section, '打印22')
    })
  })
}
function handleGetStationInfo(blkcd) {
  // 查询河道基础信息
  getStationBaseInfo({ blkcd }).then((res) => {
    if (res.code == 200) {
      state.StationBaseInfo = res.data
    }
  })
  // 查询河道指标
  getStationFControlInd({ blkcd }).then((res) => {
    if (res.code == 200) {
      state.StationFControlInd = res.data
    }
  })
  // 查询河道水位流量关系线
  getStationZqrl({ blkcd }).then((res) => {
    if (res.code == 200) {
      state.StationZqrl = res.data
      // state.wrZ = res.data?.wrZ
      // state.bzZ = res.data?.bzZ
      res.data?.forEach((e) => {
        state.StationZqrlSelect.push(e.lnnm)
      })
      if (state.StationZqrlSelect.length > 0) {
        handleSelectZqrl(state.StationZqrlSelect[0])
      }
    }
  })
  nextTick(() => {
    emitter.emit('initEcharts')
  })
}
function handleSelectZqrl(name) {
  // state.echartsData
  state.lineName = name

  let newArr = state.StationZqrl?.filter((n) => {
    return n.lnnm == name
  })
  state.wrZ = newArr[0]?.wrZ
  state.bzZ = newArr[0]?.bzZ
  newArr[0]?.vals.forEach((v) => {
    //水位
    state.echartsData.y.push(v.z)
    state.echartsData.x.push(v.q)
  })
}
// let profileData2 = {
//   z: 264.02, // 水位
//   pondage: 3.121, // 蓄水量
//   zCheck: 285.01, // 校核洪水位
//   zDamup: 282.57, // 允许壅高水位
//   zAllow: 284.92, // 允许最高水位
//   control: 3412, // 防洪库容
//   controlN: 3412, // 实时防洪库容
//   retention: 3645, // 拦洪库容
//   regulation: 3912, // 调洪库容
//   crestElevation: 500, // 坝顶高程
//   zLimit: 445, // 汛限水位
//   zDead: 265.02, // 死水位
//   zNormal: 100, // 正常蓄水位
//   zXunqianLimit: 120, // 汛前水位
//   zXunzhongLimit: 282.0, // 汛中水位
//   zXunmoLimit: 282.82, // 汛末水位
//   zDesign: 283.84, // 设计洪水位
//   zWarn: 282.57, // 警戒洪水位
//   zFloodH: 282.83, // 防洪高水位
//   zAdjustment: 282.02, // 起调水位
//   zNgsl: 282.82, // 兴利水位
//   zOvercharge: 282.32, // 允许超蓄水位
//   capacity: 4412, // 总库容
//   efst: 4412, // 兴利库容
//   ddst: 4412 // 死库容
// }
// let storageCurveData = {
//   z: [
//     '113.0',
//     '114.5',
//     '115.0',
//     '116.5',
//     '117.0',
//     '118.5',
//     '119.0',
//     '120.5',
//     '121.5',
//     '122.5',
//     '123.0',
//     '124.5'
//   ],
//   capacity: [
//     '209.000',
//     '380.000',
//     '578.000',
//     '804.000',
//     '1059.000',
//     '1328.000',
//     '1613.000',
//     '1911.000',
//     '2231.000',
//     '2577.000',
//     '2990.000',
//     '3649.000'
//   ],
//   unit: {
//     z: 'm',
//     capacity: '百万m³'
//   },
//   currentZ: '115.0',
//   currentCapacity: '578.000'
// }
// let stageDischargeRelationDataV3 = {
//   name: ['2023年报讯线', '2022年报讯线'],
//   stageInfo: [
//     [
//       '113.000',
//       '113.500',
//       '114.000',
//       '114.500',
//       '115.000',
//       '115.500',
//       '116.000',
//       '115.400',
//       '114.200',
//       '113.100',
//       '112.500',
//       '111.500'
//     ],
//     [
//       '114.000',
//       '115.500',
//       '116.000',
//       '113.500',
//       '114.000',
//       '114.500',
//       '115.000',
//       '116.500',
//       '117.500',
//       '118.500',
//       '119.000',
//       '119.500'
//     ]
//   ],
//   q: [
//     [
//       '209.000',
//       '380.000',
//       '578.000',
//       '804.000',
//       '1059.000',
//       '1328.000',
//       '1613.000',
//       '1501.000',
//       '1431.000',
//       '1377.000',
//       '1290.000',
//       '649.000'
//     ],
//     [
//       '208.000',
//       '381.000',
//       '577.000',
//       '804.000',
//       '1059.000',
//       '1328.000',
//       '1613.000',
//       '1911.000',
//       '2231.000',
//       '2577.000',
//       '2990.000',
//       '3649.000'
//     ]
//   ],
//   zWarn: '117',
//   zGuarantee: '119'
// }
// let selectWidth = 150
</script>

<style lang="less" scoped>
.water-info-box {
  width: 100%;
  height: 100%;
  .water-info-top {
    height: 100%;
    display: flex;
    .title {
      color: #409eff;
      height: 0px;
      // line-height: 10px;
      margin-top: 15px;
    }
    .left-img-info {
      width: 40%;
      margin-right: 20px;
    }
    .img-left-box {
      margin-top: 20px;
      height: 280px;
      background: #0c2b51;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .img-left-box1 {
      height: 265px;
      background: #0c2b51;
      .img-left-select {
        color: white;
        margin-top: 5px;
        height: 30px;
        margin-top: 20px;
      }
      .img-left-echarts {
        height: calc(100% - 40px);
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tabs-right-box {
      flex: 1;
      .basic-index-box {
        margin-top: 20px;
        .key-value {
          display: flex;
          height: 30px;
          .key {
          }
          .value {
            color: #409eff;
          }
        }
        .content-header {
          margin-bottom: 30px;
          margin-left: 35px;
        }
        .content-info {
          display: flex;
          justify-content: space-between;
          .info-left {
            margin-left: 35px;
          }
          .info-right {
            margin-right: 35px;
          }
        }
      }
      .design-index-box {
        padding: 0 35px;
        margin-top: 20px;
        // display: flex;
        // justify-content: space-between;
        .key-value {
          display: flex;
          height: 30px;
          .key {
          }
          .value {
            color: #409eff;
            // max-width: 100px;
          }
        }
        .info-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        .info-box-item {
          width: 100%;
        }
        // .content-left {
        //   // margin-left: 35px;
        // }
        // .content-right {
        //   // margin-right: 35px;
        // }
      }
      .dispatch-index-box {
        width: 100%;
        height: 100%;
        :deep(.el-table--fit) {
          margin-top: 10px;
          height: calc(100% - 10px) !important;
        }
      }
    }
  }
  .water-info-bottom {
    .title {
      color: #409eff;
      margin-top: 20px;
    }
    .bottom-box {
      display: flex;
      margin-top: 10px;
      justify-content: space-around;
      .bottom-item {
        width: 100%;
        height: 400px;
        background: rgb(166, 214, 214);
      }
    }
  }
}
</style>
